<template>
  <yd-keyboard v-model="isShow" :title="title" :cancel-text="cancelText" :input-text="inputText" :disorder="disorder" :trigger-close="triggerClose" :masker-opacity="maskerOpacity" :callback="keyBoardFunc" ref="keyboard"></yd-keyboard>
</template>

<script>
  import {VueExtend} from 'godspen-lib'
  import {KeyBoard} from 'vue-ydui/dist/lib.px/keyboard'

  export default {
    mixins: [VueExtend.mixin],
    name: 'KeyBoard',
    label: process.env.LABEL,
    style: process.env.STYLE,
    stack: null, // 是否是堆叠模式 ，false：孩子元素会按楼层一个个向下排布， true: 孩子元素绝对定位，随意放置位置
    childLimit: 9999,  // 孩子元素最大限制数
    leaf: true, // 是否是叶子节点，为true的时候该节点下面不能添加节点
    props: {
      isShow: {
        type: Boolean,
        default: false,
        editor: {
          label: '是否展示',
          desc: '设置键盘是否展示',
          type: 'checkbox'
        }
      },
      title: {
        type: String,
        default: 'YDUI安全键盘',
        editor: {
          label: '提示标题',
          desc: '自定义提示文案',
          type: 'input'
        }
      },
      cancelText: {
        type: String,
        default: '取消',
        editor: {
          label: '取消文案',
          desc: '自定义取消按钮文案',
          type: 'input'
        }
      },
      inputText: {
        type: String,
        default: '输入数字密码',
        editor: {
          label: '提示文案',
          desc: '自定义输入提示文案',
          type: 'input'
        }
      },
      disorder: {
        type: Boolean,
        default: false,
        editor: {
          label: '键盘乱序',
          desc: '设置键盘按键是否打乱顺序',
          type: 'checkbox'
        }
      },
      triggerClose: {
        type: Boolean,
        default: true,
        editor: {
          label: '旁击关闭',
          desc: '点击遮罩关闭键盘',
          type: 'checkbox'
        }
      },
      maskerOpacity: {
        type: Number,
        default: '.5',
        editor: {
          label: '遮罩透明',
          desc: '遮罩层透明度',
          type: 'input'
        }
      }
    },
    components: {
      [KeyBoard.name]: KeyBoard
    },
    computed: {
    },
    editorMethods: {
      showKeyBoardFunc: {
        label: '键盘设置',
        params: [{
          label: '显示键盘',
          desc: '设置是否显示安全键盘',
          type: 'boolean',
          default: true,
        }]
      }
    },
    methods: {
      // 展示键盘
      showKeyBoardFunc: function (value) {
        this.isShow = value == true
      },
      keyBoardFunc: function (value) {
        console.log('输入值：', value)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" type="text/stylus" scoped>

</style>
